<!-- 运费模板添加&修改 -->
<template>
  <div>
    <el-dialog
      :title="titleInfo.text"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="110px"
        style="width: 100%"
        :model="formBase"
        :rules="ruleInFreight"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="formBase.templateType"
            placeholder="请选择模板类型"
            style="width: 100%"
            clearable
            value-key="id"
            @change="selectTemplate"
          >
            <el-option
              v-for="item in templateOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="formBase.transportType"
            placeholder="请选择运送类型"
            style="width: 100%"
            clearable
            value-key="id"
            @change="selectTransport"
          >
            <el-option
              v-for="item in transportOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="!formBase.id"
          label="关联城市"
          prop="associatedCityList"
        >
          <el-input
            v-model="cityList[formBase.associatedCityList[0]]"
            readonly
            class="just-read"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-else
          label="关联城市"
          prop="associatedCityList"
        >
          <el-input
            v-if="formBase.associatedCityList[0] === '1'"
            v-model="cityList[formBase.associatedCityList[0]]"
            readonly
            class="just-read"
          ></el-input>
          <el-checkbox-group
            v-else
            v-model="formBase.associatedCityList"
          >
            <el-checkbox label="2">京津翼</el-checkbox>
            <el-checkbox label="3">江浙沪</el-checkbox>
            <el-checkbox label="4">川渝</el-checkbox>
            <el-checkbox label="5">黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input
            v-model="formBase.firstWeight"
            placeholder="请输入首重价格"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >元</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input
            v-model="formBase.continuousWeight"
            placeholder="请输入续重价格"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >元</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model="formBase.lightThrowingCoefficient"
            placeholder="请输入轻抛系数"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submitData"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { freightManageOperate } from '@/api/transit'
export default {
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      cityList: {
        1: '全国',
        2: '京津翼',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      },
      templateOptions: [
        {
          id: 1,
          name: '同城寄'
        },
        {
          id: 2,
          name: '省内寄'
        },
        {
          id: 3,
          name: '经济区互寄'
        },
        {
          id: 4,
          name: '跨省'
        }
      ],
      // 运送类型
      transportOptions: [
        {
          id: 1,
          name: '普快'
        },
        {
          id: 2,
          name: '特快'
        }
      ],
      dialogFormVisible: false,
      // 表单验证
      ruleInFreight: {
        templateType: [
          {
            required: true,
            message: '模板类型不能为空',
            trigger: 'blur'
          }
        ],
        transportType: [
          {
            required: true,
            message: '运送类型不能为空',
            trigger: 'blur'
          }
        ],
        associatedCityList: [
          {
            required: true,
            message: '关联城市不能为空',
            trigger: 'blur'
          }
        ],
        firstWeight: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('首重价格不能为空'))
              } else {
                const reg = /^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/
                if (!reg.test(value)) {
                  callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        continuousWeight: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('续重价格不能为空'))
              } else {
                const reg = /^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/
                if (!reg.test(value)) {
                  callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        lightThrowingCoefficient: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('轻抛系数不能为空'))
              } else {
                const reg = /^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/
                if (!reg.test(value)) {
                  callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ]
      },
      flag: true // 防止重复点击生成一下生成很多条相同的数据

    }
  },
  mounted() {

  },
  methods: {
    selectTemplate(vId) {
      this.formBase.templateType = vId
    },
    selectTransport(vId) {
      this.formBase.transportType = vId
    },
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 表单提交
    submitData() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则通过
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const data = {
            associatedCityList: this.formBase.associatedCityList,
            continuousWeight: this.formBase.continuousWeight,
            firstWeight: this.formBase.firstWeight,
            lightThrowingCoefficient: this.formBase.lightThrowingCoefficient,
            templateType: this.formBase.templateType,
            transportType: this.formBase.transportType
          }
          if (this.formBase.id !== '') {
            // 编辑
            data.id = this.formBase.id
            for (const key in this.templateOptions) {
              if (data.templateType === this.templateOptions[key].name) {
                data.templateType = this.templateOptions[key].id
              }
            }
            for (const key in this.transportOptions) {
              if (data.transportType === this.transportOptions[key].name) {
                data.transportType = this.transportOptions[key].id
              }
            }

            await freightManageOperate(data).then((res) => {
              if (String(res.code) === '200') {
                this.$message.success('编辑运费模板成功！')
              } else {
                this.$message.error(res.msg || '运费模板编辑失败')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '运费模板编辑失败')
            })
          } else {
            // 新增
            await freightManageOperate(data).then((res) => {
              if (String(res.code) === '200') {
                this.$message.success('新增运费模板成功！')
              } else {
                this.$message.error(res.msg || '新增运费模板失败')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '新增运费模板失败')
            })
          }
          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()
          this.flag = true
        } else {
          this.flag = true
          this.$message.error('请按照提示填写')
        }
      })
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 40px 66px 0 50px !important;
  }
}
.just-read {
  ::v-deep .el-input__inner {
    border: none;
  }
}
</style>
